//课程安排内容创建
function createcourseContentHTML(courseArrangementData, tab) {
  let tempCourseArrangementData = null
  if (tab == "全部") {
    tempCourseArrangementData = courseArrangementData
  } else {
    tempCourseArrangementData = courseArrangementData.filter(item => item.tags.indexOf(tab) != -1)
  }
  let courseContentHTML = ``
  tempCourseArrangementData.forEach(item => {
    let tagsHTML = ``
    item.tags.forEach(tag => {
      tagsHTML += `<div class="tag tag-${tag}">${tag}</div>`
    })
    courseContentHTML += `
    <!-- 课程安排内容项 -->
    <div class="course-item">
      <!-- 课程安排内容项左边 -->
      <div class="course-item-left">
        <!-- 课程安排内容项左边图片 -->
        <img class="course-item-img" src="${item.image}" />
      </div>
      <!-- 课程安排内容项右边 -->
      <div class="course-item-right">
        <!-- 课程安排内容项右边标题 -->
        <div class="course-item-title">
          ${item.title}
        </div>
        <!-- 课程安排内容项右边内容 -->
        <div class="course-item-content">
          ${item.content}
        </div>
        <!-- 课程安排内容项的标签栏 -->
        <div class="tags">
          ${tagsHTML}
        </div>
      </div>
    </div>
  `
  })

  return courseContentHTML;
}
// 重置tab
function resetTabs(tabs) {
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].className = "tab"
  }
}

window.onload = () => {
  // 课程安排tabs切换
  let courseArrangementData = [ //课程安排数据
    {
      image: './images/courseArrangement.jpg',
      title: '第一课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第二课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['CSS']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第三课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['JavaScript']
    }, {
      image: './images/courseArrangement.jpg',
      title: '第四课 这里是课程名称',
      content: '这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要。',
      tags: ['HTML', 'CSS', 'JavaScript']
    }
  ]
  let tabs = document.querySelectorAll(".tab")
  let courseContent = document.querySelector("#courseContent")
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].onclick = (event) => {
      resetTabs(tabs)
      tabs[i].className = "tab tab-active"
      courseContent.innerHTML = createcourseContentHTML(courseArrangementData, tabs[i].title)
    }
  }
}